<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
  /*
  * 享元模式：运用共享技术有效的支持大量的细粒度的对象，避免对象间拥有相同内容造成多余的开销
  * 就是把一些比较有重复性的代码抽象提取，重复调用，和桥接模式有一定区别
  * 桥接模式是将实现类和逻辑类相互分离，细节的改变不会引起总体项目的剧变，
  *
  */

  let Flyweight = function (){
  //  已创建的元素
    let created = [];
  //  创建一个新闻包装对象
    function create(){
      let dom = document.createElement('div');
    //  将容器放在新闻列表中
      document.getElementById('container').appendChild(dom);
    //  缓存新创建的对象
      created.push(dom);
    //  返回创建的新元素
      return dom;
    }
    return {
    //  获取创建新闻元素方法
      getDiv : function (){
      //  如果已创建的元素小于当前页元素总个数，则创建
        if(created.length < 5){
          return create();
        }else{
        //  获取第一个元素，并插在最后面
          let div = created.shift();
          created.push(div);
          return div;
        }
      }
    }
  }()

  let paper = 0;
  let num = 5;
  let len = article.length;
//  添加5条新闻
  for(let i = 0 ; i < 5; i++){
    if(caticle[i]){
    //  通过享元类获取创建的元素并写入新闻内容
      Flyweight.getDiv().innerHTML = article[i];
    }
  }
//  下一页按钮绑定事件
  document.getElementById('next_page').onclick = function (){
  //  如果新闻内容不足5条就返回
    if(article.length < 5){
      return
    }
    let n = ++paper * num % len;//获取当前页的第一条新闻索引
    let j = 0;//循环变量
    for(let j = 0;j < 5;j++){
    //  如果纯在第n+j条则插入
      if(article[n+j]){
        Flyweight.getDiv().innerHTML = article[n+j];
      //  否则插入起始位置第n+j-len条
      }else if(article[n+j-len]){
        Flyweight.getDiv().innerHTML = article[n+j-len];
      //  如果都不存在则插入空字符串
      }else{
        Flyweight.getDiv().innerHTML = '';
      }
    }
  }

</script>
</body>
</html>
